import Vue from "vue";
import Vuex from "vuex";

// 起一个别名
// import * as getters from './getters'
// import * as mutations from './mutations'
// import * as actions from './actions'

// 引入抽离成一个功能的模块化文件
import vuexStateGetters from "./modules/vuexStateGetters";
import vmodelVuexState from "./modules/vmodelVuexState";

Vue.use(Vuex);

// 三、模块化
export default new Vuex.Store({
  modules: {
    // 这个名字就是我们最终的模块化名称，就要通过它来访问 store 里的值（**重要**）
    vuexStateGetters,
    vmodelVuexState,
  },
});

// 二、文件抽离
/*
export default new Vuex.Store({
  state: {
    message: 'hello world',
    todos: [
      { id: 1, text: '1 xxx...', done: true },
      { id: 2, text: '2 xxx...', done: false }
    ]
  },
  getters,
  mutations,
  actions
})
*/

// 一、默认使用方式
/*
export default new Vuex.Store({
  state: {
    message: 'hello world',
    todos: [
      { id: 1, text: '1 xxx...', done: true },
      { id: 2, text: '2 xxx...', done: false }
    ]
  },
  getters: {
    // 获取 state 的某个属性状态
    // 注意这里是属性，不是方法。属性后跟的是方法，接收的第一个参数就是state
    GET_MESSAGE: state => state.message,
    GET_TODOS: state => state.todos.filter(item => item.done)
  },
  mutations: {
    // 第一个参数：就是state，第二个参数：接收传递过来的
    ADD_TODO: (state, todo) => state.todos.push(todo),
    // 想要异步触发，就要到 actions 中去定义
    ADD_TODO2: (state, todo) => setTimeout(() => state.todos.push(todo), 500),
  },
  actions: {
    // 异步的，等 500ms 才会被触发
    ASYNC_ADD_TODO: (context, todo) => context.commit('ADD_TODO2', todo)
  },
  modules: {
  }
})*/
